<template>
  <div>
    <Form ref="vuexArticleBasicObj" :model="vuexArticleBasicObj" :rules="ruleValidate" :label-width="100">
      <FormItem label="标题" prop="title">
        <Input v-model="vuexArticleBasicObj.title" placeholder="请输入标题"></Input>
      </FormItem>
      <FormItem label="作者" prop="author">
        <Input v-model="vuexArticleBasicObj.author" placeholder="请输入作者"></Input>
      </FormItem>
      <FormItem label="文章来源" prop="source_tip">
        <Input v-model="vuexArticleBasicObj.source_tip" placeholder="请输入来源"></Input>
      </FormItem>
      <FormItem label="来源网址" prop="source_url">
        <Input v-model="vuexArticleBasicObj.source_url" placeholder="请输入网址"></Input>
      </FormItem>
      <FormItem label="排列序号" prop="sorter">
        <Input v-model="vuexArticleBasicObj.sorter" placeholder=""></Input>
      </FormItem>

      <FormItem label="产品百科分类">
         <Select placeholder="请选择产品类型" v-model="vuexArticleBasicObj.product_property_id">
           <Option v-for="item in property" :value="item.id" :key="item.id">{{item.name}}</Option>
         </Select>
      </FormItem>
      
      <FormItem label="关联属性">
        <Button type="primary" @click="attributeList">属性列表</Button>
      </FormItem>
    <FormItem label="" >
        <Button v-for="(item,index) in propertyArr" :key='item.property_value_id'  style="margin-left: 3px;" class='p-relative-top' type="success" size='small'>
          {{item.property_value_name}}
        </Button>
    </FormItem>


      <FormItem label="文章摘要" prop="remark">
        <textarea class="form-control" v-model="vuexArticleBasicObj.remark"
          style="height: 200px; max-width: 800px; width: 800px; border: 1px solid #e5e6e7;outline-color:#709cd4; "></textarea>
      </FormItem>
    </Form>
    <!--
	属性列表弹窗 -->
  <Modal v-model="propertyModal" title="设置属性" class=""  style='width:1800px; '>
    <Form ref="normsValidate" :model="propertyForm" :rules="propertyRuleValidate" :label-width="80">
      <div class="g-row border-bottom-dash pad-bottom10 margin-bottom20">
        <div class="g-title pad-bottom20"></div>
        <div class="g-item">


          <div v-for="(item,index) in categoryList">
            <FormItem :label="item.title">
              <CheckboxGroup  v-model="item.itemGroup">
                <Checkbox   :label="row.id" v-for="(row,index) in item.sub">{{row.title}}</Checkbox>
                <Input @on-blur="changeNewSub(index)" style="width: 100px;" v-for="(data,j) in item.new_sub" v-model='data.property_value_name'></Input>
               <!-- <Button @click="addNormsItem(index)" size="small" type="primary">+</Button> -->
              </CheckboxGroup>
            </FormItem>
          </div>


        </div>
      </div>
    </Form>

    <div slot="footer">
      <Button @click='propertyModal=false'>取消</Button>
      <Button type="primary" @click='saveProperty'>确定</Button>
    </div>
  </Modal>



  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
  import Tables from '_c/tables'

  import {
    mapState,
    mapMutations
  } from 'vuex'
  import {
    initConfig
  } from '@/config/global.js'
  export default {
    props: [
      'property',
      'categoryList'

    ],
    name: 'tables_page',

    components: {
      Tables
    },
    created() {

    },
    watch: {
      uploadModal(newVal) {
        if (!newVal) {
          this.showUpload = false // 关闭弹窗，showUpload设置为false
        }
      }
    },
    mounted() {

    },
    created() {

       },
    computed: {
      ...mapState({
        propertyArr:state => state.article.propertyArr,
        vuexArticleBasicObj: state => state.article.vuexArticleBasicObj
      })
    },
    data() {
      return {
        initConfig: initConfig,
        propertyModal: false,
        defaultSelect:[],
        formValidate: {},
        ruleValidate: {},
        normsValidate: {},
        propertyForm:{},
        propertyForm:{},
            propertyRuleValidate:{},
            propertyList:{},
        attributeForm: {
          newProduct: [
            // '新品产品测评'
          ],
          women: [],
          child: [],
          course: [],
          blood: [],
          is_hot: [],
          healthyLife: [],
          dailNews: []
        },
        attrArr: [],
        propertys:[],
        data: {

        }



      }
    },
    methods: {
      ...mapMutations([
        'setVuxPropertyArr',
        'setVuxproperty',
        'setVuexArticleBasicObj'
      ]),
      // 列表数据



      getSelectedImgList(e) {
        this.fromChild.selectedImgList = e
      },

      change(status) {
        this.$Message.info('开关状态：' + status)
      },

      changeNewSub(i) {

      },

      // 属性列表弹窗
      attributeList() {
        // let obj = JSON.parse(JSON.stringify(row)) // 行数据

        this.propertyModal = true
        // this.initConfig.isAdd = true

      },

      saveProperty(){
        let _this = this;
        let list=[];

        this.categoryList.forEach(function(row){
          let itemGroup=[];
          itemGroup=row.itemGroup;

          let sub=row.sub || [];

          let subArr=[]
          sub.forEach(function(item){

              if(itemGroup!=undefined){
                if(itemGroup.includes(item.id)){
                  subArr.push({
                    property_value_name:item.title,
                    property_value_id:item.id,
                    pid:item.pid,
                  })

                 }
              }
          })
          let obj={
            property_name:row.title,
            property_id:row.id,
            sub:subArr
          }

          list.push(obj)

        })
        let selectProperty=[];

        list.forEach(function(row){
          row.sub.forEach(function(item){
            selectProperty.push(item)
          })
        });
        this.setVuxPropertyArr(selectProperty)//vuex

        let newList=JSON.parse(JSON.stringify(list));
        let filterList=[]
        newList.forEach(function(k){
          k.sub.forEach(function(j){
            filterList.push({
              property_id:k.property_id,
              property_name:k.property_name,
              property_value_name:j.property_value_name,
              property_value_id:j.property_value_id
            })

          })

        })

        // 改变vuex
        this.setVuxproperty(filterList)


        this.propertyModal =false;
        this.list=[]
      },

    }

  }
</script>

<style lang="scss">
  @import "./base-info.scss";
</style>
